<template>
  <div>
    <template v-if="loading">
      <slot name="loading">
        <LoadingSkeleton />
      </slot>
    </template>
    <template v-else-if="error">
      <n-result
        class="mt-10"
        status="500"
        title="错误提示"
        :description="error?.data.data || '页面走丢了'"
      >
        <template #footer>
          <n-button @click="$router.go(-1)">返回上一页</n-button>
        </template>
      </n-result>
    </template>

    <template v-else-if="isEmpty">
      <Empty />
    </template>

    <template v-else>
      <slot name="default" />
    </template>
  </div>
</template>

<script setup>
// 引入native-ui
import { NButton, NResult, NGi } from "naive-ui";

// 声明类型
const props = defineProps({
  pending: {
    type: Boolean,
    default: false,
  },
  error: {
    type: Object,
    default: null,
  },
  isEmpty: {
    type: Boolean,
    default: () => false,
  },
});

// 加载响应式参数
const loading = ref(false);

// 监听
const stop = watchEffect(() => {
  if (props.pending && !loading.value) {
    loading.value = true;
  } else {
    setTimeout(() => {
      loading.value = false;
    }, 200);
  }
});

onBeforeUnmount(() => stop());
</script>
